.My-page { width: 100%; height: 100%; }

.My-page a { color: #333; }

.My-page .header { width: 100%; height: 120px; position: relative; background-image: linear-gradient(90deg, #feda4e, #fd9f44); border-bottom-right-radius: 90px 15px; border-bottom-left-radius: 90px 15px; }

.My-page .header .top { width: 90%; margin: 0 auto; padding-top: 20px; }

.My-page .header .top .icon { display: flex; justify-content: end; }

.My-page .header .top .icon > img { width: 20px; height: 18px; margin: 0 0 0 20px; }

.My-page .header .top .login { width: 90%; height: 80px; background-color: #fff; position: absolute; bottom: -30px; left: 0; right: 0; margin: auto; border-radius: 8px; box-shadow: 0 0 5px #ccc; display: flex; align-items: center; }

.My-page .header .top .login > img { width: 50px; height: 50px; border-radius: 50%; display: block; margin-left: 20px; }

.My-page .header .top .login .username { font-weight: 600; display: block; margin-left: 15px; font-size: 18px; }

.My-page .header .bottom { width: 90%; margin: 0 auto; margin-top: 130px; }

.My-page .header .bottom .b-top { display: flex; justify-content: space-between; }

.My-page .header .bottom .b-top .right, .My-page .header .bottom .b-top .left { width: 48%; height: 60px; box-shadow: 0 0 5px #ccc; border-radius: 8px; display: flex; align-items: center; }

.My-page .header .bottom .b-top .right > img, .My-page .header .bottom .b-top .left > img { width: 25px; height: 25px; display: block; margin-left: 10px; }

.My-page .header .bottom .b-top .right .txt, .My-page .header .bottom .b-top .left .txt { margin-left: 10px; line-height: 20px; }

.My-page .header .bottom .b-top .right .txt > h4, .My-page .header .bottom .b-top .left .txt > h4 { font-size: 15px; color: #53361c; font-weight: 600; }

.My-page .header .bottom .b-top .right .txt > span, .My-page .header .bottom .b-top .left .txt > span { font-size: 12px; color: #b5a899; font-weight: 600; }

.My-page .header .bottom .b-mid { width: 100%; margin-top: 30px; }

.My-page .header .bottom .b-mid > ul { display: flex; justify-content: space-around; }

.My-page .header .bottom .b-mid > ul > li { height: 60px; display: flex; }

.My-page .header .bottom .b-mid > ul > li a { height: 60px; color: #000; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

.My-page .header .bottom .b-mid > ul > li .img { width: 35px; height: 30px; }

.My-page .header .bottom .b-mid > ul > li .img > img { width: 100%; height: 100%; display: block; }

.My-page .header .bottom .b-mid > ul > li > span { font-size: 14px; font-weight: 600; }

.My-page .header .bottom .b-bot { width: 100%; margin-top: 35px; }

.My-page .header .bottom .b-bot > ul > li { margin: 10px 0 30px 0; display: flex; justify-content: space-between; align-items: center; }

.My-page .header .bottom .b-bot > ul > li > h4 { font-weight: 600; }

.My-page .header .bottom .b-bot > ul > li > img { width: 10px; height: 20px; }

.My-page .header .removeLg { width: 70%; margin: 0 auto; text-align: center; padding: 8px 15px; border-radius: 12px; background-color: #feda4e; font-size: 14px; font-weight: bold; letter-spacing: 0.8px; color: #fff; }

.My-page .header .lgactive { background-color: #f2f2f2; color: #53361c; }
